import Vue from 'vue'
//1.导入路由相关的包
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
const HelloWorld = ()=>import('../components/HelloWorld')

//也可以直接在路由里面放置
//import Home from '../components/Home'


//import About from '../components/About'
const About = ()=>import('../components/About')


//import User from '../components/User'
const User = ()=>import('../components/User')

const Message = ()=>import('../components/HomeMessage')

const News = ()=>import('../components/HomeNews')

const Profile = ()=>import('../components/Profile')


//2.通过Vue.use(插件) ， 安装插件
Vue.use(Router)




//3.创建VueRouter对象，并将其导出
const router = new Router({

  //用于定义全局，当对应<router-link/>被激活时，会自动给当前元素设置一个class值为bbb， 不设置默认是router-link-active
   linkActiveClass:'bbb',
  mode:'history',
  //配置路由和组件之间的映射关系  （重要）
  routes: 
  [
    {
      path:'/user/:abc',
      component: User,
      meta:{
        title:'用户'
      }
    },

    //一个path对应一个组件  这里不是完整的url
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path:'',
      //重定向
      redirect:'/home'
    },
   
    {
      path:'/home',
      component: ()=>import('../components/Home'),
      name:'Home',
      meta:{
        title:'首页'
      },
      children:[
       
        {
          //子路由前面不需要加/会自动跟父路径拼接起来
          path:'message',
          component:Message
        },
        {
          path:'news',
          component:News
        }
      ]
    },
    {
      path:'/about',
      component: About,
      name:'About',
      meta:{
        title:'关于'
      }
    },
    {
      path:'/profile',
      component:Profile,
      meta:{
        title:'档案'
      }
    }


  ]
})

//前置勾子  在路由跳转之前进行的回调  ，因为在路由跳转之前就已经调用了该函数
router.beforeEach((to, from, next) => {

  //从from跳到to这个路由

  //matched匹配，如果在Home组件中存在子组件（所以就算导航到子组件也要显示home的标题）
//所以选择matched[0]表示的是最上级父级内容 matched[1]匹配的的是子级组件，以此类推
  //因为对象是具体的当前路由对象
  document.title=to.matched[0].meta.title

  console.log(to)
  console.log(from)
  console.log("前置狗子------------")

  //必须调用 //当你实现beforeEach这个方法就必须调用、
  //因为内部beforeEach是默认实现next()
  //不调用next跳转不了  不然下一步执行不了
  next()
})

//后置狗子
//跳转之后调用的
router.afterEach( (to,from) => {
  console.log('后置狗子-------------------')
})




//4.挂载到main.js的的vue实例中，上面已经导出
//在main.js中通过import router from './router'导入
//在这里如果你导入的是一个文件夹，会自动去找该文件夹下面的所有文件

export default router